<template>
  <div class="w-full h-full relative">
    <div class="w-full h-full overflow-y-auto absolute p-5">
      <p class="w-full h-10 flex items-center justify-center">
        <span>Tailwind CSS 入门</span>
      </p>
      <div>
        <p class="text_ao leading-10">
          Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的
          CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。他快速、灵活、可靠，没有运行时负担。
        </p>
      </div>
      <div>
        <p class="leading-10">地址：</p>
        <p class="text_ao leading-10">
          <span>中文文档：</span>
          <a href="https://www.tailwindcss.cn/docs/installation"
            >https://www.tailwindcss.cn/docs/installation</a
          >
        </p>
        <p class="text_ao leading-10">
          <span>样式快速搜索：</span>
          <a href="https://nerdcave.com/tailwind-cheat-sheet"
            >https://nerdcave.com/tailwind-cheat-sheet</a
          >
        </p>
      </div>
      <div>
        <p>安装</p>
        <el-timeline>
          <el-timeline-item timestamp="安装 Tailwind CSS" placement="top">
            <el-card>
              <p>
                通过 npm 安装 tailwindcss，然后创建你自己的 create your tailwind.config.js
                配置文件。
              </p>
              <p>npm install -D tailwindcss</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="配置模板文件的路径" placement="top">
            <el-card>
              <p>在 tailwind.config.js 配置文件中添加所有模板文件的路径。</p>
              <p>
                /** @type {import('tailwindcss').Config} */ <br />
                module.exports = {<br />
                content: ["./src/**/*.{html,js}"],<br />
                theme: {<br />
                extend: {},<br />
                },<br />
                plugins: [],<br />
                }<br />
              </p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item
            timestamp="将加载 Tailwind 的指令添加到你的 CSS 文件中"
            placement="top"
          >
            <el-card>
              <p>在你的主 CSS 文件中通过 @tailwind 指令添加每一个 Tailwind 功能模块。</p>
              <p>
                @tailwind base;<br />
                @tailwind components;<br />
                @tailwind utilities;<br />
              </p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="开启 Tailwind CLI 构建流程" placement="top">
            <el-card>
              <p>
                运行命令行（CLI）工具扫描模板文件中的所有出现的 CSS 类（class）并编译 CSS
                代码。
              </p>
              <p>npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item
            timestamp="在你的 HTML 代码中使用 Tailwind 吧"
            placement="top"
          >
            <el-card>
              <p>
                在 'head' 标签内引入编译好的 CSS 文件，然后就可以开始使用 Tailwind
                的工具类 来为你的内容设置样式了。
              </p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    return {};
  },
});
</script>

<style lang="scss" scoped>
.text_ao {
  text-indent: 2em;
}
</style>
